let chatIds = []

// 事件委托监听整个文档
document.addEventListener('click', async e => {
  // 找到最近的目标元素
  const target = e.target.closest('.thread-item-transition-enter-done')
  if (!target) return // 不是我们关心的元素就跳过

  await new Promise(resolve => {
    setTimeout(resolve, 100)
  })
  getPageData()
})

async function getPageData() {
  await waitForSelector('[data-testid="audio_play_button"]')

  // showToast('发送成功')

  const chatId = location.href.split('/').pop()

  fetch('http://127.0.0.1:3001/plugin/message', {
    method: 'POST', // 必须指定为 POST
    headers: {
      'Content-Type': 'application/json', // 告诉服务器数据是 JSON 格式
      // 可选：如果接口需要认证，添加 Token（如 JWT）
      Authorization: 'Bearer your_token_here',
    },
    body: JSON.stringify({
      type: 'content',
      data: {
        chatId,
        html: document.querySelector('[data-testid="message-list"]').innerHTML,
      },
    }), // 将 JS 对象转为 JSON 字符串（请求体）
  })
    .then(res => {
      return res.json()
    })
    .then(res => {
      if (res.data.isOnline) chatIds.push(chatId)
      else showToast('未联网不保存')
    })
}

async function waitForSelector(selector, hidden = false, timeout = 60_000) {
  return new Promise((resolve, reject) => {
    const start = Date.now()

    const check = () => {
      const el = document.querySelector(selector)

      console.log('check', el)

      if (hidden ? !el : el) {
        resolve()
      } else if (Date.now() - start > timeout) {
        reject(new Error(`waitForSelector 超时: ${selector}`))
      } else {
        setTimeout(check, 500)
      }
    }

    check()
  })
}

// 简易提示函数
function showToast(message = '操作成功', duration = 2000) {
  // 创建容器
  const toast = document.createElement('div')

  // 设置内容
  toast.innerText = message

  // 设置样式
  Object.assign(toast.style, {
    position: 'fixed',
    top: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
    backgroundColor: 'rgba(0,0,0,0.7)',
    color: '#fff',
    padding: '10px 20px',
    borderRadius: '5px',
    fontSize: '14px',
    zIndex: 9999,
    opacity: 0,
    transition: 'opacity 0.3s, transform 0.3s',
    pointerEvents: 'none',
  })

  // 插入页面
  document.body.appendChild(toast)

  // 强制浏览器渲染，然后显示
  requestAnimationFrame(() => {
    toast.style.opacity = 1
    toast.style.transform = 'translateX(-50%) translateY(0)'
  })

  // 自动消失
  setTimeout(() => {
    toast.style.opacity = 0
    toast.style.transform = 'translateX(-50%) translateY(-20px)'
    toast.addEventListener('transitionend', () => {
      toast.remove()
    })
  }, duration)
}

// 定义已处理样式
const style = document.createElement('style')
style.textContent = `
  .processed {
    background-color: #f0f0f0; /* 灰色背景 */
    color: #999;               /* 文字变灰 */
    border-left: 4px solid #4caf50; /* 左边绿色标记 */
  }
`
document.head.appendChild(style)

// 给已处理的聊天项添加样式
function markProcessed() {
  chatIds.forEach(id => {
    const el = document.querySelector(`#conversation_${id}`)
    if (el) {
      el.classList.add('processed')
    }
  })
}

// 页面动态加载时也能处理
const observer = new MutationObserver(markProcessed)
observer.observe(document.body, { childList: true, subtree: true })

// 首次标记
// markProcessed()
fetch('http://127.0.0.1:3001/plugin/chat', {})
  .then(res => res.json())
  .then(res => {
    chatIds = res.data.chatIds
  })
